<template>
  <div class="content1">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="tableAuto">
          <p style="margin-bottom:10px">{{$t('system.menu')}}</p>
          <el-table :data="menuList" :height="height" style="width:100%" stripe :header-cell-style="{background:'#EAEBEC'}"
            :row-class-name="getRowClass">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table :data="props.row.children" style="width:100%" border stripe ref="refTable1" highlight-current-row
                  :show-header="false">
                  <el-table-column prop="menuName" show-overflow-tooltip :label="$t('system.menu_name')">
                    <template slot-scope="scope">
                      <div style="padding-left:105px">
                        {{scope.row.menuName}}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column type="index" :label="$t('common.number')" align="center" width="80"></el-table-column>
            <el-table-column prop="menuName" show-overflow-tooltip :label="$t('system.menu_name')"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="tableAuto">
          <p style="margin-bottom:10px">{{$t('system.user_information')}}</p>
          <el-table :data="userList" :height="height" style="width:100%" stripe :header-cell-style="{background:'#EAEBEC'}">
            <el-table-column type="index" :label="$t('common.number')" align="center" width="80"></el-table-column>
            <el-table-column prop="faccount" width="150" show-overflow-tooltip :label="$t('system.user_name')"></el-table-column>
            <el-table-column prop="fisAdministrator" width="110" show-overflow-tooltip :label="$t('system.is_it_valid')">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.fsignature" disabled active-color="#00A09D"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="fdescription" show-overflow-tooltip :label="$t('basic.remarks')"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="description">
        <div>
          <p style="margin-bottom:10px">{{$t('system.role_desc')}}:</p>
          <el-input type="textarea" v-model="description" disabled></el-input>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    userList: Array,
    menuList: Array,
    description: String,
    screenWidth: Number
  },
  data () {
    return {
      height: "calc(100vh - 300px)",

    }
  },
  watch: {
    screenWidth (val) {
      if (val <= 990) {
        this.height = ""
      } else {
        this.height = "calc(100vh - 300px)"
      }
    }
  },

  methods: {

    getRowClass (row) {
      let data = row.row;
      let res = [];
      if (data.children && data.children.length > 0) {
        res.push('row-expand-has');
        return res;
      } else {
        res.push('row-expand-unhas');
        return res;
      }
    }
  }
}
</script>
<style scoped>
.tableAuto >>> .el-table__expanded-cell {
  padding: 0;
}
.tableAuto >>> .row-expand-unhas .el-table__expand-column .el-icon {
  visibility: hidden;
}
</style>